<script setup lang="ts">
    import { ref, computed } from 'vue';
    import { useUserStore } from '@/stores/user';

    import BindEmailDialog from "@/views/Main/User/Center/Render/Settings/BindEmail/index.vue";
    import BindPhoneDialog from "@/views/Main/User/Center/Render/Settings/BindPhone/index.vue";
    import SetPwdDialog from "@/views/Main/User/Center/Render/Settings/SetPwd/index.vue";

    const userStore = useUserStore();
    
    // 展示绑定手机框
    const showBingPhoneDialog = ref(false);
    // 展示绑定邮箱框
    const showBingEmailDialog = ref(false);
    // 展示设置密码框
    const showSetPwdDialog = ref(false);

    // 用户信息
    const userInfo = computed(() => userStore.userInfo);

</script>
<template>
    <div class="account-box">
        <!-- <div class="item bind-phone">
            <div class="account-header">
                <div>绑定手机</div>
            </div>
            <div class="tip">绑定手机号，可提高账户安全性</div>
            <div class="accout-body">
                <div class="accout-body-l">手机号</div>
                <div class="accout-body-r">
                    <p>
                        <span class="accout-error">为了账户安全，请绑定手机号</span>
                        <a @click="showBingPhoneDialog = true">绑定</a>
                    </p>
                </div>
            </div>
        </div> -->
        <div class="item bind-email">
            <div class="account-header">
                <div>绑定邮箱</div>
            </div>
            <div class="tip">绑定邮箱账号，可提高账户安全性，及时接收邮箱提醒</div>
            <div class="accout-body">
                <div class="accout-body-l">用户邮箱</div>
                <div class="accout-body-r">
                    <p>
                        <span class="accout-error">{{ userInfo.email ? userInfo.email : '为了账户安全，请绑定邮箱' }}</span>
                        <a @click="showBingEmailDialog = true">{{ userInfo.email ? '换绑' : '绑定' }}</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item bind-account">
            <div class="account-header">
                <div>绑定社交账号</div>
            </div>
            <div class="tip">绑定社交账号，可快速、高效的登录系统</div>
            <div class="grid">
                <div class="accout-body">
                    <div class="accout-body-l">
                        <svg-icon href="#icon-qq" width="25px" height="25px"></svg-icon>&nbsp;QQ
                    </div>
                    <div class="accout-body-r">
                        <p>
                            <span class="accout-error">回忆里依稀</span>
                            <a>解绑</a>
                        </p>
                    </div>
                </div>
                <div class="accout-body">
                    <div class="accout-body-l">
                        <svg-icon href="#icon-weibo" width="25px" height="25px"></svg-icon>&nbsp;微博
                    </div>
                    <div class="accout-body-r">
                        <p>
                            <span class="accout-error">回忆里依稀</span>
                            <a>解绑</a>
                        </p>
                    </div>
                </div>
                <div class="accout-body">
                    <div class="accout-body-l">
                        <svg-icon href="#icon-wechat" width="25px" height="25px" fill=" #00FF00"></svg-icon>&nbsp;微信
                    </div>
                    <div class="accout-body-r">
                        <p>
                            <span class="accout-error">未绑定</span>
                            <a>绑定</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item set-pwd">
            <div class="account-header">
                <div>账户密码</div>
            </div>
            <div class="tip">定期修改密码有助于账户安全</div>
            <div class="accout-body">
                <div class="accout-body-l">账户密码</div>
                <div class="accout-body-r">
                    <p>
                        <span class="accout-error">建议设置密码</span>
                        <a @click="showSetPwdDialog = true">设置</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <bind-phone-dialog :visible="showBingPhoneDialog" @close="showBingPhoneDialog = false" />
    <!-- 绑定用户邮箱框 -->
    <bind-email-dialog :visible="showBingEmailDialog" :oldEmail="userInfo.email" @close="showBingEmailDialog = false" />
    <!-- 设置密码框 -->
    <set-pwd-dialog :visible="showSetPwdDialog" @close="showSetPwdDialog = false" />
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" />

<style>
    .user-center-header {
        color: #999aaa;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        font-weight: 400;
    }
    .user-center-header span:hover {
        color: #fc5531;
    }
    .user-center-header span {
        cursor: pointer;
    }
</style>